@extends('layouts.master3')
<?php
use App\Utils;
?>

@section('title')
{{"千里码-图片库"}}
@endsection

@section("css")
<link rel="stylesheet" href="/css/photoGallery.css">
<link rel="stylesheet" href="/css/jquery.fileupload.css">
<link rel="stylesheet" href="/css/jquery.fileupload-ui.css">
@endsection

@section('content')

<!-- Latest compiled JavaScript -->
<div class="contain">
    <form method="POST" action="http://www.qlcoder.com/u/update" accept-charset="UTF-8" enctype="multipart/form-data">
<input type="hidden" name="_token" value="{{csrf_token()}}">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-12 lead">
                                    <span class="owner"><?php echo $username;?>的图片库</span>
                                    <span class="img-note"><b><?php echo count($imgs);?></b>/500</span>
                                    <?php if(count($imgs)<500) { ?>
                                        <span id="img_upload" class="btn btn-primary fileinput-button pull-right">
                                        <span>上传图片</span>
                                        <input type="file" id="image" name="image" multiple>
                                    </span>
                                    <?php
                                    }
                                    ?>
                                    <!-- 进度条-->
                                    <!--<div class="progress progress-striped active" role="progressbar" aria-valuemin="10" aria-valuemax="100" aria-valuenow="0">-->
                                        <!--<div id="weixin_progress" class="progress-bar progress-bar-success" style="width:0%;"></div>-->
                                    <!--</div>-->

                                    <hr>
                                </div>
                            </div>
                            <div class="row">
                                <div class="img-warp">
                                    <ul>
                                        <?php for($i=0;$i<count($imgs);$i++) {?>
                                            <a style = "background:url('<?php echo $imgs[$i]['path'];?>') no-repeat;background-size:100%;" href="<?php echo $imgs[$i]['path'];?>" class="target" target="_blank">
                                                <span class="clipboard" data-url = "http://www.qlcoder.com<?php echo $imgs[$i]['path'];?>" href = "javascript:;" > 复制图片地址</span>
                                                <span class="del-img" data-url = "<?php echo $imgs[$i]['path'];?>" href = "javascript:;" ><i class="iconfont" >&#xe61a;</i></span>
                                            </a >
                                        <?php
                                        }?>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document" style="width:1200px;position: absolute;top: 50%;left: 50%;margin-left: -600px;margin-top:-200px;">
                <div class="modal-content">
                    <div class="modal-body" style="padding:0;">
                        <img src="http://www.qlcoder.com/uploads/145059173416304.png" style="display: block;margin: 0 auto;">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="result-alert _tip none" style="border:1px solid #ddd;z-index: 2">
    <div class="result_warp">
        <div class="warning">
            <i class="iconfont">&#xe616;</i><!-- true:&#xe617;   flase:&#xe616;  -->
        </div>
        <p>确定删除该图片吗?</p>
        <div class="query">
            <a class="btn btn-primary result-query">确定</a>
            <a class="btn btn-default result-cancel">取消</a>
        </div>
    </div>

</div>
<div class="result-alert _success none" style="border:1px solid #ddd;z-index: 2">
    <div class="result_warp">
        <div class="warning">
            <i class="iconfont">&#xe617;</i><!-- true:&#xe617;   flase:&#xe616;  -->
        </div>
        <p>拷贝成功</p>
    </div>

</div>
@endsection

<!-- JavaScript jQuery code from Bootply.com editor  -->

@section('js')
<script src="/js/jquery.zclip.min.js"></script>
<script src="/js/jquery.ui.widget.js"></script>
<script src="/js/jquery.fileupload.js"></script>
<script src="/js/jquery.iframe-transport.js"></script>
<script>
$(function(){
        copyPath();
        //从图片库删除
        //thumbImg();
        $(".result-query").click(function(){
            var path=$(this).attr("data-path");
			var index=$(this).attr("data-index");
			$("._tip").addClass("none");
            $.ajax({
                url:"http://www.qlcoder.com/deleteimage?deletepath="+path,
                type:"post",
                dataType:"json",
                data:{
                    _token:$("input[name='_token']").val()
                },
                success:function(data){
					imgNum(-1);	
				    $("._success").removeClass("none").find("p").html("成功删除一张图片！");
                    $(".target").eq(index).remove();
                    display($("._success"));
                }
            })
        });
        $(".result-cancel").click(function(){
            $("._tip").addClass("none")
        });
        $("#image").fileupload({
            url: 'http://www.qlcoder.com/upload',
            sequentialUploads: true,
            done: function (e, data) {
                console.log(data)
                var d = data.result;
                if(!d.suc){
                    $("._success").removeClass("none").find(".warning").find("i").html("&#xe616;");
                    $("._success").find("p").html("上传失败");
                    display($("._success"));
                }else{
                    $("._success").removeClass("none").find(".warning").find("i").css("color","#2aa515");
                    $("._success").find("p").html("上传成功");
					imgNum(1);
                    display($("._success"));
                    var imgshow = '<a style="background:url('+ d.path+') no-repeat;background-size:100%;" href="'+d.path+'" class="target" target="_blank">'+
                            '<span class="clipboard" data-url="'+ d.path+'" href="javascript:;">复制图片地址</span>'+
                            '<span class="del-img" data-url="'+d.path+'" href="javascript:;"><i class="iconfont">&#xe61a;</i></span></a>';
                    $('.img-warp ul').prepend(imgshow);
                    copyPath();
                    //thumbImg();
                }
            }
        })
    });
	$(document).on('click',".del-img",function(e){
		e.stopPropagation();
        var _this=this;
        var path=$(_this).attr("data-url");
		var n = $(_this).parent().index();
        $("._tip").removeClass("none").find(".warning").find("i").html("&#xe616;");
        $(".result-query").attr("data-path",path).attr("data-index",n);
        return !1;
	})
    //copy path
    function copyPath(){
        $(".clipboard").click(function(e){
            e.stopPropagation();
            return !1;
        });
        $(".clipboard").zclip({
            path:"js/ZeroClipboard.swf",
            copy:function(){
                return $(this).attr("data-url");
            },
            afterCopy:function(e){
//                console.log(e)
                $("._success").removeClass("none").find(".warning").find("i").css("color","#2aa515");
                $("._success").find("p").html("成功复制到剪切板！");
                display($("._success"));
            }
        });
    }
    //大图,暂时不显示
    function thumbImg(){
        $(".img-warp ul li").each(function(){
            var _this=this;
            $(_this).click(function(e){
                console.log(1);
                console.log(e.currentTarget.tagName)
                if(e.currentTarget.tagName=="LI"){
                    $("#myModal .modal-body").find("img").attr("src",$(this).children('.clipboard').attr("data-url"));
                    $("#myModal").modal('show');
                }

            })
        });
        $(".modal-body img").click(function(){
            $("#myModal").modal('hide');
        });
    }
    function display(obj){
        setTimeout(function(){obj.addClass("none")},1000);
    }
	function imgNum(count){
		var num=parseInt($(".img-note b").html());
		num+=count;
		$(".img-note b").html(num);	
	}
</script>
@endsection
